<template>
  <div class="page">
    <div class="head">
      <div class="head-title">订单详情</div>
      <div class="head-box">
        <div class="box-item">订单号：{{ orderItem.shopOrderId }}</div>
        <div class="box-item">客户姓名：{{ orderItem.custName }}</div>
        <div class="box-item">订单总金额（元）：￥{{ orderItem.orderActualAmt }}</div>
      </div>
      <div class="head-box">
        <div class="box-item">品规数量：{{ orderItem.goodsTotalQty }}</div>
        <div class="box-item">
          订单状态：
          <Tag :color="this.$dict.orderStatus.color(orderItem.orderStatus)">
            {{ this.$dict.orderStatus.name(orderItem.orderStatus) }}
          </Tag>
        </div>
        <div class="box-item">订单时间：{{ timestampToTime(orderItem.postTime) }}</div>
      </div>
      <div class="head-box">
        <div class="box-item">收货人：{{ orderItem.consigneeName }}</div>
        <div class="box-item">收货人电话：{{ orderItem.consigneeMobile }}</div>
        <div class="box-item">
          配送地址：{{ orderItem.provinceName }}/{{ orderItem.cityName }}/{{ orderItem.countyName }}/{{
            orderItem.addressDetail
          }}
        </div>
      </div>
      <div class="head-box">订单备注：{{ orderItem.orderNotes }}</div>
      <div class="head-box">
        <div class="box-item item-image">
          回执图片：
          <img :src="orderItem.image" alt="" />
        </div>
        <div class="box-item">回执备注：{{ orderItem.remark }}</div>
        <div class="box-item">发货地址：{{ orderItem.pickSiteInfo }}</div>
      </div>
    </div>
    <div class="main">
      <Table border :columns="columns" :data="dataGrid"></Table>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Detail',
  data() {
    return {
      columns: [
        {
          title: '商品图片',
          key: 'goodsImg',
          width: 100,
          render: (h, params) => {
            return h('div', [
              h(
                'img',
                {
                  attrs: {
                    src: params.row.goodsImg,
                  },
                  style: {
                    width: '50px',
                    height: '46px',
                  },
                },
                'View'
              ),
            ])
          },
        },
        {
          title: 'SKU_ID',
          key: 'skuId',
          width: 220,
        },
        {
          title: '商品名称',
          key: 'goodsName',
        },
        {
          title: '数量',
          key: 'goodsQty',
          width: 100,
          sortable: true,
        },
        {
          title: '单位',
          key: 'skuUom',
          width: 100,
        },
        {
          title: '单价(元)',
          key: 'salePrice',
          width: 150,
          sortable: true,
          render: (h, params) => {
            return h('div', [
              h('a', { style: { fontSize: '12px', color: 'gray' } }, '￥'),

              h('span', params.row.salePrice),
            ])
          },
        },
        {
          title: '金额(元)',
          key: 'actualAmt',
          sortable: true,
          width: 150,
          render: (h, params) => {
            return h('div', [
              h('a', { style: { fontSize: '12px', color: 'gray' } }, '￥'),

              h('span', this.goodsAllMoney(params.row.salePrice, params.row.goodsQty)),
            ])
          },
        },
      ],
    }
  },
  props: {
    dataGrid: Array,
    orderItem: Object,
    callbank: Function,
  },
  created() {},
  methods: {
    timestampToTime(timestamp) {
      return this.$date(timestamp, 'yyyy-MM-dd HH:mm:ss')
    },
    goodsAllMoney(salePrice, goodsQty) {
      let moneyAll = (salePrice * goodsQty).toFixed(2)
      return moneyAll
    },
  },
}
</script>
<style lang="less" scoped>
.page {
  width: 100%;
}
.head {
  width: 100%;
}
.head-title {
  font-size: 20px;
  height: 40px;
  font-weight: bold;
}
.head-box {
  display: flex;
  width: 100%;
  justify-content: space-between;
  min-height: 30px;
}
.box-item {
  width: 30%;
}
.btns {
  margin: 16px 0px;
}
.item-image {
  display: flex;
  align-items: flex-start;
}
</style>
